<template>
  <div class="find-work-container">
    <span
      style="  font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;font-size: 10px; text-align: justify;color: #085591;margin-bottom: 40px;margin-left: 80px;">クラウドソーシングTOP
      》》》 仕事・求人情報を探す
    </span>
    <!-- 顶部广告区域 -->
    <div class="top-banner">
    </div>
    <!-- web版 -->
    <div class="desktop-layout">
      <div class="job-stats">
      <span style="margin-left: 80px;">すべて の仕事・求人情報を探す 1 至 {{ jobList.length }} 件 (共 {{ totalCount }} 件)</span>
      <el-button v-if="showPublishButton" type="primary" class="publish-new-job-btn" @click="openPublishJobDialog">発表（はっぴょう）</el-button>
    </div>
    </div>
    <!-- 手机版 -->
    <div class="mobile-layout">
      <div class="job-stats">
      <div>すべて の仕事・求人情報を探す</div>
      <el-button v-if="showPublishButton" type="primary" class="publish-new-job-btn" @click="openPublishJobDialog">発表（はっぴょう）</el-button>
      </div>
       <div class="job-stats-txt">1 至 {{ jobList.length }} 件 (共 {{ totalCount }} 件)</div>
    </div>
    
    <!-- 职位列表区域 -->
    <div class="job-list-container">
      <!-- 职位类型筛选 -->
      <div class="job-filter">

        <div class="filter-title">
          <div class="filter-title-text">
          仕事カテゴリ  
          </div>
        </div>

        <div class="filter-content">
          <div v-for="(category, index) in jobTypes" :key="index" class="filter-category" @mouseleave="handleMouseLeave" @mouseover="handleMouseOver(index)">
            <div class="category-name">
              <span>{{ category.name }}</span>
              <span class="toggle-icon" v-show="occupationIndex!=index">></span>
            </div>
            <div class="category-items">
              <div class="title-occupation">システム開発</div>
              <div class="split-line"></div>
              <div v-for="job in category.child" :key="job.jobs_type_id" class="category-item"
                :class="{ 'active': selectedJobTypeId === job.jobs_type_id }" @click.stop="selectJobType(job.jobs_type_id)">
                {{ job.name }}
              </div>
            </div>
          </div>
        </div>

      <div class="filter" v-if="showRegister">
        <div class="model-block">
          <div class="model-content">
            <h3 style="font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;font-size: 12px;">新規会員登録</h3>
            <p style="font-size: 11px;margin-top: 15px;">メールアドレスを入力してください</p>
            <p>
              <input type="text" name="" id="" class="numin" placeholder="例如: mail@gmail.com" style="font-size: 12px;">
            </p>
            <el-button class="regbtn"> 今すぐ会員登録（無料</el-button>
            <p style="font-size: 11px; padding: 0 8px;font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;line-height: 1.6;">
              <a href="/article/3">利用規約</a>
              および
              <a href="/article/2">個人情報</a>
              の取り扱いについて同意の上、登録してください。
            </p>
          </div>
         </div>
      </div>


    </div>
        <!-- 注册 -->
      <!-- <div class="filter" v-if="showRegister">
        <div class="model-block">
          <div class="model-content">
            <h3 style="font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;font-size: 12px;">新規会員登録
            </h3>
            <p style="font-size: 11px;">メールアドレスを入力してください</p>
            <p>
              <input type="text" name="" id="" class="numin" placeholder="例如: mail@gmail.com" style="font-size: 12px;">

            </p>
            <el-button class="regbtn"> 今すぐ会員登録（無料</el-button>
            <p style="font-size: 12px;font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;"><a
                href="/article/3">利用規約</a>および<a href="/article/2">個人情報</a>の取り扱いについて同意の上、登録してください。</p>
          </div>
        </div>
      </div> -->

      <!-- 右侧内容区域 -->
      <div class="job-content-area">
        <!-- 搜索框 -->
        <div class="searchbox">
          <div class="search-box">
            <div class="search-ctr">
              <el-input v-model="keywords" placeholder="キーワードで探す" class="search-input" clearable>
                <template #prefix>
                  <div
                    style="display: flex; align-items: center;width: 58px;height: 44px;border-radius: 4px;position: relative;right:10px;background-color: transparent;border-right:1px solid powderblue;">
                    <el-icon style="font-size: 18px;margin: auto;color: #909399;">
                      <Search />
                    </el-icon>
                  </div>
                </template>
              </el-input>
            </div>

            <el-button type="primary" @click="searchJobs" class="search-btn">検索</el-button>
          </div>
        </div>

        <!-- 职位统计信息 -->
        <!-- 筛选选项 -->
        <div class="filter-options">
          <div class="filter-group">
            <div class="filter-option">
              <el-checkbox v-model="hideExpired" @change="searchJobs" />
              <span>募集終了を隠す</span>
            </div>
            <div class="filter-option">
              <el-checkbox v-model="showDetails" />
              <span>詳細を表示する</span>
            </div>
          </div>
          <div class="pagination-controls">
            <el-button :disabled="currentPage <= 1" @click="prevPage" class="pagination-btn" style="border-radius: 0;">
              <el-icon><ArrowLeft /></el-icon>
              前のページ
            </el-button>
            <el-button @click="nextPage" class="pagination-btn" style="margin-left: 0px;border-radius: 0;">
            次のページ
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>

        <!-- 职位列表 -->
        <div class="desktop-layout">
            <div class="job-list">
                <div v-for="job in jobList" :key="job.id" class="job-item" @click="recruitmentDetails(job.id)">
                    <div class="job-details-grid2">
                        <div class="job-content" :data-count="job.content.length > 200 ? '+' + (job.content.length - 200) : ''">
                            <div class="job-title">
                                <div class="job-info">
                                    <span class="job-name">{{ job.name }}</span>
                                    <span class="job-type">{{ job.jobs_type_name }}</span>
                                </div>
                            </div>
                            <div v-if="showDetails" class="text-container">
                               <div class="multi-line-ellipsis" v-html="formatHtmlContent(job.content)"></div>
                         </div>
                        </div>

                        <div class="job-salary">
                            <div>
                                <span>報酬範囲: {{ job.salary_range }}</span>
                            </div>
                        </div>

                        <div class="job-recruits">
                            <div>
                                <div class="count">契約数 {{ job.persons_int }}人</div>
                                <div class="divider"></div>
                                <div class="recruit">(募集人数 {{ job.recruits_people }}人)</div>
                            </div>
                        </div>
                        
                        <div class="job-deadline">
                            <div>
                                <div class="days">あと {{ job.last_day }}日</div>
                                <div class="limit">({{ job.limit_time }}まで)</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="job-footer">
                        <div class="publisher">
                            <el-avatar :size="30" :src="job.user?.avatar ? BASE_URL + job.user?.avatar : ''">
                                {{ job.user?.username?.charAt(0) || 'ユ' }}
                            </el-avatar>
                            <span>{{ job.user?.company_name }}</span>
                        </div>
                        <div class="apply-info">
                            <span class="publish-date">公開日: {{ job.createtime }}</span>
                            <button class="apply-btn" @click.stop="openApplyDialog(job)">仕事を応募</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 移动布局 -->
        <div class="mobile-layout">
            <div v-for="job in jobList" :key="'m-'+job.id" class="mobile-job-item" @click.stop="recruitmentDetails(job.id)">
                <div class="mobile-job-header">
                    {{ job.jobs_type_name }}
                </div>
                
                <div class="mobile-job-main">
                    <div>
                        <img class="mobile-job-image" :src="job.user?.avatar ? BASE_URL + job.user?.avatar : ''"></img>
                        <span class="mobile-job-subtitle">{{ job.user?.company_name }}</span>
                    </div>
                    <div class="mobile-job-info">
                        <div class="mobile-job-title">{{ job.name }}</div>
                        <div class="mobile-job-date">掲載日: {{ job.createtime }}</div>
                        <div class="mobile-job-tag">報酬: {{ job.salary_range }}</div>
                    </div>
                    <div class="mobile-right-img-tc">
                        <img class="mobile-right-img" src="../../public/img/work/youbian.png"></img>
                    </div>
                </div>
                
                <div class="mobile-job-stats">
                    <div class="mobile-stat">
                        <div class="mobile-stat-title">募集人数</div>
                        <div class="mobile-stat-value">{{ job.recruits_people }}<span class="mobile-stat-unit">人</span></div>
                    </div>
                    <div class="mobile-stat">
                        <div class="mobile-stat-title">契約数</div>
                        <div class="mobile-stat-value">{{ job.persons_int }}<span class="mobile-stat-unit">人</span></div>
                    </div>
                </div>
                
                <div class="mobile-job-apply">
                    <button class="mobile-apply-btn" @click.stop="openApplyDialog(job)">仕事を応募</button>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <!-- <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="totalCount"
            layout="prev, pager, next" @current-change="handlePageChange" /> -->
            <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />
        </div>
      </div>


    </div>
  </div>

      <!-- <div class="filter" v-if="showRegister">
        <div class="model-block">
          <div class="model-content">
            <h3 style="font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;font-size: 12px;">新規会員登録
            </h3>
            <p style="font-size: 11px;">メールアドレスを入力してください</p>
            <p>
              <input type="text" name="" id="" class="numin" placeholder="例如: mail@gmail.com" style="font-size: 12px;">

            </p>
            <el-button class="regbtn"> 今すぐ会員登録（無料</el-button>
            <p style="font-size: 12px;font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;"><a
                href="/article/3">利用規約</a>および<a href="/article/2">個人情報</a>の取り扱いについて同意の上、登録してください。</p>
          </div>
        </div>
      </div> -->

      
  <!-- 申请工作对话框 -->
  <el-dialog v-model="applyDialogVisible" :title="selectedJob ? selectedJob.name : '申请工作'" width="90%">

    <el-form :model="applyForm" label-width="100px">
      <el-form-item label="氏名">
        <el-input v-model="applyForm.name" ></el-input>
      </el-form-item>
      <el-form-item label="電話番号">
        <el-input v-model="applyForm.phone" ></el-input>
      </el-form-item>
      <el-form-item label="住所">
        <el-input v-model="applyForm.address" ></el-input>
      </el-form-item>
      <el-form-item label="希望報酬">
        <el-input v-model="applyForm.expected_reward" placeholder="予想される報酬を入力してください"></el-input>
      </el-form-item>
      <el-form-item label="納品数量">
        <el-input v-model="applyForm.delivery_quantity" :min="1"></el-input>
      </el-form-item>
      <el-form-item label="作業開始日">
        <el-date-picker v-model="applyForm.start_time" type="date" placeholder="「開始日を選択してください。」 a day" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="作業終了日">
        <el-date-picker v-model="applyForm.end_time" type="date" placeholder="「開始日を選択してください。」 a day" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="applyDialogVisible = false">キャンセル</el-button>
        <el-button type="primary" @click="submitApplication" style="background-color: #409EFF;border:none;"> 確認する </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 签名确认对话框 -->
  <el-dialog v-model="signDialogVisible" title="请签名确认" width="90%" @opened="initCanvas">

    <div v-if="orderInfo" class="contract-info">
      <h3>合同信息</h3>
      <p>职位名称: {{ orderInfo.jobs_name }}</p>
      <div class="contract-content" v-html="orderInfo.content"></div>
    </div>
    <div class="signature-area">
      <p>右侧区域签名:</p>
      <div class="canvas-container">
        <canvas ref="signCanvas"
          style="display: block; margin: 0 auto; width: 100%; height: 200px; border: 1px solid #ccc; touch-action: none;"
          @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing" @mouseleave="endDrawing"
          @touchstart.prevent="handleTouchStart" @touchmove.prevent="handleTouchMove" @touchend.prevent="endDrawing">
        </canvas>
      </div>
      <el-button @click="clearSignature" size="small">清除签名</el-button>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="signDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitSignature">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 完整内容对话框 -->
  <el-dialog v-model="fullContentDialogVisible" title="" width="90%">

    <div v-if="selectedJob" class="full-content">
      <h2>{{ selectedJob.name }}</h2>
      <!-- 工作概要和内容 -->
      <div class="job-section">
        <h3>仕事の詳細</h3>
        <div v-html="selectedJob.content" class="rich-content"></div>
      </div>
      <!-- 职位基本信息 -->
      <div class="job-info-section">
        <h3>仕事の概要</h3>
        <div class="info-item">
          <span class="info-label">報酬範囲</span>
          <span class="info-value">{{ selectedJob.salary_range }}円</span>
        </div>
        <div class="info-item">
          <span class="info-label">掲載日</span>
          <span class="info-value">{{ selectedJob.createtime }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">応募期限</span>
          <span class="info-value">{{ selectedJob.limit_time }}</span>
        </div>
      </div>
      <!-- 应募状况 -->
      <div class="job-status-section">
        <h3>応募状況</h3>
        <div class="status-grid">
          <div class="status-item">
            <span class="status-label">応募した人</span>
            <span class="status-value">{{ selectedJob.apply_int }}人</span>
          </div>
          <div class="status-item">
            <span class="status-label">契約した人</span>
            <span class="status-value">{{ selectedJob.persons_int }}人</span>
          </div>
          <div class="status-item">
            <span class="status-label">募集人数</span>
            <span class="status-value">{{ selectedJob.recruits_people }}人</span>
          </div>
        </div>
      </div>
      <!-- 公司信息 -->
      <div class="company-section" v-if="selectedJob.user">
        <h3>クライアント情報</h3>
        <div class="company-header">
          <el-avatar :size="60" :src="selectedJob.user.avatar ? BASE_URL + selectedJob.user.avatar : ''"></el-avatar>
          <div class="company-basic-info">
            <h4>{{ selectedJob.user.company_name }}</h4>
            <p>{{ selectedJob.user.prefectures }} · {{ selectedJob.user.zip_code }}</p>
          </div>
        </div>
        <div class="company-detail">
          <div class="info-item">
            <span class="info-label">住所:</span>
            <span class="info-value">{{ selectedJob.user.address }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">電話番号:</span>
            <span class="info-value">{{ selectedJob.user.company_phone }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">総合評価:</span>
            <span class="info-value">{{ selectedJob.user.company_assess }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">募集実績:</span>
            <span class="info-value">{{ selectedJob.user.job_int }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">プロジェクト完了率:</span>
            <span class="info-value">{{ selectedJob.user.company_completion_rate }}</span>
          </div>
        </div>
        <!-- <div class="company-intro" v-if="selectedJob.user.company_introduce">
          <h4>会社紹介</h4>
          <div v-html="selectedJob.user.company_introduce" class="rich-content"></div>
        </div> -->
      </div>

    </div>
  </el-dialog>

  <!-- 发布职位对话框 -->
  <el-dialog v-model="publishJobDialogVisible" :title="isEdit ? '発表（はっぴょう）' : '発布職位'" width="90%" >
    <el-form :model="publishJobForm" label-width="120px" :rules="rules" ref="jobFormRef">
      <el-form-item label="求人タイトル" prop="name">
        <el-input v-model="publishJobForm.name" placeholder="請輸入職位名称" />
      </el-form-item>
      <el-form-item label="募集人数" prop="recruits_people">
        <el-input v-model="publishJobForm.recruits_people"  placeholder="人数を入力してください" />
      </el-form-item>
      <el-form-item label="給与制度" prop="salary_range">
        <el-input v-model="publishJobForm.salary_range" placeholder="例如：50,000円〜950,000円" />
      </el-form-item>
      <el-form-item label="締切日" prop="limit_time">
        <el-date-picker v-model="publishJobForm.limit_time" type="date" placeholder="締切日" format="YYYY-MM-DD" class="custom-week-label-picker"
          value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="仕事種類" prop="jobs_type_id">
        <el-cascader
          v-model="publishJobForm.jobs_type_id"
          :options="jobTypes"
          :props="{
            value: 'jobs_type_id',
            label: 'name',
            children: 'child'
          }"
          placeholder="仕事種類"
          clearable
        />
      </el-form-item>
      <el-form-item label="仕事内容" prop="content">
        <div class="editor-container">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            ref="editorElement"
            style="height: 300px; width: 100%; overflow-y: auto; white-space: pre-wrap;"
            v-model="publishJobForm.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="公開状態" prop="status">
        <el-radio-group v-model="publishJobForm.status">
          <el-radio :label="1">公開</el-radio>
          <el-radio :label="2">非公開</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="publishJobDialogVisible = false">キャンセル</el-button>
        <el-button type="primary" @click="submitPublishJob" :loading="submitting">
        発布
        </el-button>
      </div>
    </template>
  </el-dialog>
  <CustomerService />
 <el-button
    v-loading.fullscreen.lock="fullscreenLoading"
    style="border: none;"
  >
  </el-button>
</template>

<script setup>
import { ref, onMounted, computed, reactive, nextTick, onBeforeUnmount, shallowRef } from 'vue'
import { jobsApi, orderApi, commonApi, BASE_URL } from '../api/index.js'
import { ElMessage, ElLoading } from 'element-plus'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import CustomerService from '../components/CustomerService.vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nChangeLanguage, i18nAddResources } from '@wangeditor/editor'
import jaLang from '../util/editorJaLang.js'


// 初始化路由
const router = useRouter()

// 职位类型数据
const jobTypes = ref([])
const selectedJobTypeId = ref('')

const showRegister = ref(false)
const showPublishButton = ref(false)
// 职位列表数据
const jobList = ref([])
const totalCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 搜索和筛选条件
const keywords = ref('')
const hideExpired = ref(false)
const showDetails = ref(true)

// 申请工作相关
const applyDialogVisible = ref(false)
const signDialogVisible = ref(false)
const fullContentDialogVisible = ref(false)
const selectedJob = ref(null)
const orderInfo = ref(null)

// 发布职位相关
const publishJobDialogVisible = ref(false)
const isEdit = ref(false)
const jobFormRef = ref(null)
const submitting = ref(false)

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 编辑器配置
const toolbarConfig = {
  showMenuTooltips: false,
  toolbarKeys: [
    'headerSelect',
    'bold',
    'italic',
    'underline',
    'through',
    'color',
    'bgColor',
    'bulletedList',
    'numberedList',
    'insertLink',
    'lineHeight',
    '|',
    'undo',
    'redo'
  ]
}

const editorConfig = {
  placeholder: '請輸入職位描述...',
   // 关键配置：启用自动转换换行符
  autoConvert: true,
  convertBr: true,
  MENU_CONF: {
    // 配置换行相关选项
    lineHeight: {
      lineHeightList: ['1', '1.5', '1.75', '2', '3', '4']
    },
    // 配置段落格式
    paragraphStyle: {
      textIndent: '2em'
    },
    // 配置回车换行行为
    enterToCreateP: {
      enabled: true
    },
  }
}
const fullscreenLoading = ref(false)
const openFullScreen1 = () => {
  fullscreenLoading.value = true
  setTimeout(() => {
    fullscreenLoading.value = false
  }, 2000)
}

// 添加粘贴事件监听
const addPasteEventListener = () => {
  // 获取编辑器的文本容器
  const textContainer = document.querySelector('.w-e-text-container');
  if (textContainer) {
    textContainer.addEventListener('paste', handlePasteEvent);
    console.log('粘贴事件监听器已添加');
  } else {
    console.error('未找到编辑器文本容器');
  }
};

const handlePasteEvent = (event) => {
  
  const text = event.clipboardData.getData('text/plain');
  const html = event.clipboardData.getData('text/html');
  
  console.log('纯文本内容:', text);
  console.log('HTML内容:', html);
  
  if (text) {
    event.preventDefault(); // 阻止默认粘贴行为
    
    // 处理换行符
    const processedText = text.replace(/\n/g, '\n'); // 保持换行符
    
    if (editorRef.value) {
      // 使用编辑器的API插入文本
      editorRef.value.insertText(processedText);
    }
  }
};

onBeforeUnmount(() => {
  // 清理事件监听
  const textContainer = document.querySelector('.w-e-text-container');
  if (textContainer) {
    textContainer.removeEventListener('paste', handlePasteEvent);
  }
});

// 编辑器模式
const mode = 'default'

// 发布职位表单数据
const publishJobForm = reactive({
  jobs_type_id: '',
  name: '',
  recruits_people: 1,
  salary_range: '',
  limit_time: '',
  content: '',
  status: 1,
  jobs_id: ''
})

//职业选中的下标
const occupationIndex = ref(null)

// 表单验证规则
const rules = {
  // jobs_type_id: [{ required: true, message: '請選択職位類別', trigger: 'change' }],
  // name: [{ required: true, message: '請輸入職位名称', trigger: 'blur' }],
  // recruits_people: [{ required: true, message: '請輸入招聘人数', trigger: 'blur' }],
  // salary_range: [{ required: true, message: '請輸入薪資範囲', trigger: 'blur' }],
  // limit_time: [{ required: true, message: '請選択到期日期', trigger: 'change' }],
  // content: [{ required: true, message: '請輸入職位描述', trigger: 'blur' }],
  // status: [{ required: true, message: '請選択状態', trigger: 'change' }]
}

// 申请表单数据
const applyForm = reactive({
  name: '',
  phone: '',
  address: '',
  expected_reward: '',
  delivery_quantity: 0,
  start_time: '',
  end_time: ''
})

// 签名数据
const signCanvas = ref(null)
const isDrawing = ref(false)
const lastPoint = reactive({ x: 0, y: 0 })
const userSign = ref('')

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const formatHtmlContent = (text) => {
  if (!text) return ''
  
  const plainText = text.replace(/<[^>]*>/g, '')
  
  const cleanText = plainText
    .replace(/\s+/g, ' ')          
    .replace(/\n+/g, ' ')          
    .trim()                       
  
    console.log(cleanText)
  return cleanText
}

// 编辑器创建完成时的回调
const handleCreated = (editor) => {
  editorRef.value = editor;
  console.log('编辑器创建完成');
  
  // 安全地处理现有内容
  try {
    const originalHtml = editor.getHtml();
    if (originalHtml && typeof originalHtml === 'string' && originalHtml.trim() !== '') {
      // 确保内容中的换行符被正确处理
      const processedHtml = originalHtml.replace(/\n/g, '<br>');
      editor.setHtml(processedHtml);
      console.log('编辑器内容已处理');
    } else {
      console.log('编辑器内容为空，无需处理');
    }
  } catch (error) {
    console.error('处理编辑器内容时出错:', error);
  }
  
  // 编辑器创建后添加事件监听
  nextTick(() => {
    addPasteEventListener();
  });
};

//鼠标离开职业选项
const handleMouseLeave = () => {
  occupationIndex.value = null
}
//鼠标悬停选中职业
const handleMouseOver = (index) => {
  occupationIndex.value = index
}

// 计算属性：扁平化职位类型列表
const flatJobTypes = computed(() => {
  const result = []
  jobTypes.value.forEach(category => {
    if (category.child && Array.isArray(category.child)) {
      result.push(...category.child)
    }
  })
  return result
})

// 获取职位类型
const getJobTypes = async () => {
  try {
    const res = await jobsApi.getJobsType()
    if (res.code === 1) {
      jobTypes.value = res.data

    } else {
      ElMessage.error('職種の取得に失敗しました')
    }
  } catch (error) {
    console.error('获取职位类型出错:', error)
    ElMessage.error('職種の取得に失敗しました')
  }
}

// 获取职位列表
const getJobsList = async () => {
  openFullScreen1()
  try {
    const params = {
      page: currentPage.value,
      limit: pageSize.value,
      hide_expired: hideExpired.value ? 1 : '',
      jobs_type_id: selectedJobTypeId.value,
      keywords: keywords.value
    }

    const res = await jobsApi.getWorkList(params)
    if (res.code === 1) {
      jobList.value = res.data.list
      // 添加日志检查职位列表数据结构
      console.log('职位列表数据:', res.data.list)
      if (res.data.list.length > 0) {
        console.log('第一个职位数据:', res.data.list[0])
      }
      totalCount.value = parseInt(res.data.totalCount)
    } else {
      ElMessage.error('職種の取得に失敗しました')
    }
  } catch (error) {
    console.error('获取职位列表出错:', error)
    ElMessage.error('職種の取得に失敗しました')
  }
}

// 选择职位类型
const selectJobType = (typeId) => {
  if (selectedJobTypeId.value === typeId) {
    selectedJobTypeId.value = ''
  } else {
    selectedJobTypeId.value = typeId
  }
  currentPage.value = 1
  searchJobs()
}

//跳转详情页
const recruitmentDetails = (id) => {
  router.push({
    path: '/recruitmentDetails',
    query: {
      id: id
    }
  })
}

// 搜索职位
const searchJobs = () => {
  currentPage.value = 1
  getJobsList()
}

// 限制文本显示字符数并保留HTML标签
/**
 * 限制文本长度，去除HTML标签
 * @param {string} text - 原始文本
 * @param {number} limit - 字符限制数量
 * @returns {string} 截取后的纯文本
 */
const limitText = (text, limit) => {
  // 空值检查
  if (!text) return ''

  // 去除HTML标签，获取纯文本
  const plainText = text.replace(/<[^>]*>/g, '')

  // 如果文本长度未超限，返回纯文本
  if (plainText.length <= limit) {
    return plainText
  }

  // 截取指定长度的文本并添加省略号
  return plainText.substring(0, limit) + '...'
}

// 显示完整内容
const showFullContent = (job) => {
  selectedJob.value = job
  fullContentDialogVisible.value = true
}

// 打开申请工作对话框
const openApplyDialog = (job) => {
  // 检查用户是否已登录
  const token = localStorage.getItem('token')
  if (!token) {
ElMessage.error({
  message: `<b>「システム通知」</b><br>
「まずログインしてから申請してください。」`,
  dangerouslyUseHTMLString: true
});
    // 3秒后跳转到登录页面
    setTimeout(() => {
      router.push({
        path: '/login',
      })
    }, 3000)
    return
  }

 let userdata = JSON.parse(localStorage.getItem('accountInfo'))
  if (userdata.bank == null) {
            ElMessage.error({
                message: `「銀行口座が未登録です」<br>
お客様のアカウントには、現在ご利用可能な銀行口座が登録されておりません。
<br>
お手数ですが、銀行口座を追加してから、再度お試しください。」`,
                dangerouslyUseHTMLString: true
            });
            // 3秒后跳转到银行账户页面
            setTimeout(() => {
                router.push({
                    path: '/user/bankaccount',
                })
            }, 3000)
            return
        }

  // 确保job对象包含jobs_id
  if (!job || !job.id) {
    ElMessage.warning('職種の取得に失敗しました')
    return
  }

  // 保存完整的职位信息，并确保jobs_id字段存在
  selectedJob.value = {
    ...job,
    jobs_id: job.id // 确保jobs_id字段存在，使用id作为jobs_id
  }

  console.log('选中的职位信息:', selectedJob.value)

  applyDialogVisible.value = true
  // 重置表单
  Object.keys(applyForm).forEach(key => {
    if (key !== 'delivery_quantity') {
      applyForm[key] = ''
    } else {
      applyForm[key] = 1
    }
  })
}

// 提交申请
const submitApplication = async () => {
  try {
    // 再次检查用户是否已登录
    const token = localStorage.getItem('token')
    if (!token) {
      ElMessage.warning('ログインの有効期限が切れています。求人に応募するには再度ログインしてください')
      applyDialogVisible.value = false
      // 跳转到登录页面，并设置重定向回当前页面
      router.push({
        path: '/login',
        query: { redirect: '/findwork' }
      })
      return
    }

    // 验证表单
    if (!applyForm.name || !applyForm.phone || !applyForm.address ||
      !applyForm.expected_reward || !applyForm.start_time || !applyForm.end_time) {
      ElMessage.error('お名前を入力してください')
      return
    }

    // 添加日志检查jobs_id是否正确传递
    console.log('selectedJob:', selectedJob.value)
    console.log('jobs_id:', selectedJob.value?.jobs_id)

    // 确保jobs_id存在
    if (!selectedJob.value?.jobs_id) {
      ElMessage.warning('職種のIDが存在しません。求人に応募するには求人を選択してください')
      return
    }

    const data = {
      jobs_id: selectedJob.value.jobs_id,
      ...applyForm
    }

    console.log('提交的数据:', data)

    const res = await orderApi.createOrder(data)
    if (res.code === 1) {
      ElMessage.success('応募が成功しました。署名を確認してください')
      orderInfo.value = res.data
      applyDialogVisible.value = false
      signDialogVisible.value = true
    } else if (res.code === 401) {
      ElMessage.warning('ログインの有効期限が切れています。求人に応募するには再度ログインしてください')
      applyDialogVisible.value = false
      // 跳转到登录页面，并设置重定向回当前页面
      router.push({
        path: '/login',
        query: { redirect: '/findwork' }
      })
    } else if (res.code === 1001) {
      ElMessage.warning(res.msg || '銀行カードが追加されていません')
      applyDialogVisible.value = false
      // 跳转到银行账户页面，并设置重定向回当前页面
      router.push({
        path: '/user/bankaccount',
        query: { redirect: '/find-work' }
      })
    } else {
      ElMessage.error('応募が失敗しました')
    }
  } catch (error) {
    console.error('提交申请出错:', error)
    ElMessage.error('応募が失敗しました')
  }
}

// 初始化画布
const initCanvas = () => {
  const canvas = signCanvas.value;
  const rect = canvas.getBoundingClientRect();

  // 设置画布实际大小与显示大小一致
  canvas.width = rect.width;
  canvas.height = rect.height;

  // 设置画布样式大小
  canvas.style.width = rect.width + 'px';
  canvas.style.height = rect.height + 'px';

  // 初始化绘图上下文
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.strokeStyle = '#000000';
}

// 开始绘制签名
const startDrawing = (event) => {
  isDrawing.value = true;
  const canvas = signCanvas.value;
  const rect = canvas.getBoundingClientRect();

  // 计算相对于画布的坐标
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;

  lastPoint.x = (event.clientX - rect.left) * scaleX;
  lastPoint.y = (event.clientY - rect.top) * scaleY;
}

// 绘制签名
const draw = (event) => {
  if (!isDrawing.value) return;

  const canvas = signCanvas.value;
  const ctx = canvas.getContext('2d');
  const rect = canvas.getBoundingClientRect();

  // 计算相对于画布的坐标
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;

  const x = (event.clientX - rect.left) * scaleX;
  const y = (event.clientY - rect.top) * scaleY;

  ctx.beginPath();
  ctx.moveTo(lastPoint.x, lastPoint.y);
  ctx.lineTo(x, y);
  ctx.stroke();

  lastPoint.x = x;
  lastPoint.y = y;
}


// 结束绘制签名
const endDrawing = () => {
  isDrawing.value = false
}

// 清除签名
const clearSignature = () => {
  const canvas = signCanvas.value
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  userSign.value = ''
}

// 触摸开始
const handleTouchStart = (e) => {
  if (e.touches.length === 1) {
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent("mousedown", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    startDrawing(mouseEvent);
  }
}

// 触摸移动
const handleTouchMove = (e) => {
  if (e.touches.length === 1) {
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent("mousemove", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    draw(mouseEvent);
  }
}

// 提交签名
const submitSignature = async () => {
  try {
    // 检查用户是否已登录
    const token = localStorage.getItem('token')
    if (!token) {
      ElMessage.warning('ログインの有効期限が切れています。求人に応募するには再度ログインしてください')
      signDialogVisible.value = false
      // 跳转到登录页面，并设置重定向回当前页面
      router.push({
        path: '/login',
        query: { redirect: '/findwork' }
      })
      return
    }

    const canvas = signCanvas.value
    // 检查签名是否为空
    const ctx = canvas.getContext('2d')
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data
    const isEmpty = !imageData.some(channel => channel !== 0)

    if (isEmpty) {
      ElMessage.warning('署名を入力してください')
      return
    }

    // 显示上传中提示
    const loadingInstance = ElLoading.service({
      text: '署名をアップロード中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
      // 将签名转换为base64格式
      const base64Data = canvas.toDataURL('image/png')
      userSign.value = base64Data

      // 将base64转换为Blob对象
      const byteString = atob(base64Data.split(',')[1])
      const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]
      const ab = new ArrayBuffer(byteString.length)
      const ia = new Uint8Array(ab)

      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
      }

      // 创建File对象
      const signatureFile = new File([new Blob([ab], { type: mimeString })], 'signature.png', { type: mimeString })

      // 上传签名图片
      const uploadRes = await commonApi.upload(signatureFile)

      if (uploadRes.code !== 1) {
        throw new Error(uploadRes.msg || '署名画像のアップロードに失敗しました')
      }

      // 获取上传后的图片路径
      const signatureUrl = uploadRes.data.url

      // 提交签名信息
      const data = {
        order_id: orderInfo.value.order_id,
        user_sign: signatureUrl // 使用上传后的图片URL而不是base64
      }

      const res = await orderApi.signOrder(data)

      loadingInstance.close() // 关闭加载提示

      if (res.code === 1) {
        ElMessage.success('署名を確認しました。応募は完了しました')
        signDialogVisible.value = false
        // 刷新职位列表
        getJobsList()
      } else if (res.code === 401) {
        ElMessage.warning('ログインの有効期限が切れています。求人に応募するには再度ログインしてください')
        signDialogVisible.value = false
        // 跳转到登录页面，并设置重定向回当前页面
        router.push({
          path: '/login',
          query: { redirect: '/findwork' }
        })
      } else if (res.code === 1001) {
        ElMessage.warning('銀行カードが追加されていません')
        signDialogVisible.value = false
        // 跳转到银行账户页面，并设置重定向回当前页面
        router.push({
          path: '/user/bankaccount',
          query: { redirect: '/find-work' }
        })
      } else {
        ElMessage.error('署名を確認できませんでした')
      }
    } catch (uploadError) {
      loadingInstance.close() // 确保加载提示被关闭
      console.error('签名上传出错:', uploadError)
      ElMessage.error(uploadError.message || 'サインアップに失敗しました')
    }
  } catch (error) {
    console.error('签名确认出错:', error)
    ElMessage.error('署名を確認できませんでした')
  }
}

// 页码变化处理
const handlePageChange = (page) => {
  console.log('yedd')
  currentPage.value = page
  getJobsList()
}
//一页展示数量
const handleSizeChange = (num) => {
  pageSize.value = num
  getJobsList()
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    getJobsList()
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value * pageSize.value < totalCount.value) {
    currentPage.value++
    getJobsList()
  }
}

// 打开编辑/发布对话框
const openPublishJobDialog = (edit = false, row = null) => {
  // 检查用户是否已登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessage.warning('ログインしてください')
    router.push({
      path: '/login'
    })
    return
  }

  isEdit.value = edit
  publishJobDialogVisible.value = true

  // 重置表单
  Object.keys(publishJobForm).forEach(key => {
    if (key === 'recruits_people') {
      publishJobForm[key] = 1
    } else if (key === 'status') {
      publishJobForm[key] = 1
    } else {
      publishJobForm[key] = ''
    }
  })

  // 如果是编辑，填充表单数据
  if (edit && row) {
    Object.keys(publishJobForm).forEach(key => {
      if (key === 'jobs_id') {
        publishJobForm[key] = row.id
      } else if (key === 'jobs_type_id' && row[key] !== undefined) {
        // 为级联选择器找到正确的路径值
        for (const categoryIndex in jobTypes.value) {
          const category = jobTypes.value[categoryIndex];
          if (category.child && category.child.length > 0) {
            for (const childIndex in category.child) {
              const subType = category.child[childIndex];
              if (subType.jobs_type_id === row[key]) {
                publishJobForm[key] = row[key];
                break;
              }
            }
          }
        }
      } else if (row[key] !== undefined) {
        publishJobForm[key] = row[key]
      }
    })
  }
}

// 提交职位表单
const submitPublishJob = async () => {
  if (!jobFormRef.value) return

  await jobFormRef.value.validate(async (valid) => {
    if (!valid) return

    submitting.value = true
    try {
      // 创建一个新对象用于提交，确保jobs_type_id是正确的值
      const submitData = { ...publishJobForm }
      
      // 确保jobs_type_id是一个有效的ID值
      if (typeof submitData.jobs_type_id !== 'number') {
        // 如果是级联选择器返回的数组，取最后一个值（子类ID）
        if (Array.isArray(submitData.jobs_type_id) && submitData.jobs_type_id.length > 0) {
          submitData.jobs_type_id = submitData.jobs_type_id[submitData.jobs_type_id.length - 1]
        }
      }
      
      const res = await jobsApi.saveJob(submitData)
      if (res.code === 1) {
        ElMessage.success(isEdit.value ? 'ポジションの更新に成功しました' : 'ポストの発行に成功した')
        publishJobDialogVisible.value = false
        getJobsList() // 刷新列表
      } else {
        ElMessage.error(res.msg || (isEdit.value ? 'ポジション更新に失敗しました' : 'ポストの公開に失敗しました'))
      }
    } catch (error) {
      console.error('提交職位出錯:', error)
      ElMessage.error(isEdit.value ? 'ポジション更新に失敗しました' : 'ポストの公開に失敗しました')
    } finally {
      submitting.value = false
    }
  })
}


const checkuser = () => {
  let userdata = JSON.parse(localStorage.getItem('accountInfo'))
  console.log(userdata)
  showRegister.value = userdata === null
  showPublishButton.value = userdata && userdata.type === 2
}
// 页面加载时获取数据
onMounted(() => {
  getJobTypes()
  getJobsList()
  checkuser()
  // 添加日语语言包
  i18nAddResources('ja', jaLang)
  // 设置编辑器语言为日语
  i18nChangeLanguage('ja')
})

</script>

<style scoped>
@media (max-width: 768px) {
  .model-content {
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
  }
  
}

.model-content > * {
  margin-bottom: 10px;
}

/* 职位 */
       .desktop-layout {
            display: block;
        }
       
        .mobile-layout {
            display: none;
        }
        
        .job-list {
            width: 100%;
            flex: 1;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .job-item {
            color: #333;
            font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;
            font-size: 12px;
            border: 1px solid #e0e0e0;
            padding: 15px;
            margin-bottom: 15px;
            /* background: white; */
            transition: all 0.3s;
        }

        .job-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .job-details-grid2 {
            display: grid;
            grid-template-columns: 40% auto auto 7rem;
            gap: 10px;
            /* align-items: center; */
        }
        .job-details-grid {
          display: flex;
           width: 100%;
           margin: -10px -10px 0px -10px;
           height: auto;
        }
        .multi-line-ellipsis {
         display: -webkit-box;
         -webkit-line-clamp: 3; /* 带前缀的版本 */
        -webkit-clamp: 3; /* 带前缀的版本 */
         line-clamp: 3;         /* 标准版本 */
        -webkit-box-orient: vertical;
         overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.6;
        /* max-height: 4.8em; */
}
        .job-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #085581;
        }

        .job-info {
            display: flex;
            flex-direction: column;
        }

        .job-name {
            font-size: 11px;
            font-weight: bold;
        }

        .job-type {
            font-size: 11px;
            color: #085581;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .job-content {
            margin-bottom: 25px;
            padding: 10px 10px 20px 10px;
            height: auto;
            border-radius: 4px;
            /* overflow: hidden; */
            position: relative;
            /* flex: 1 1 auto;
            min-width: 200px;
            line-height: 11px;
            height: 50px; */
        }

        .job-content::after {
            content: attr(data-count);
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 2px 5px;
            font-size: 12px;
            color: #666;
        }

        /* .text-container {
            max-height: 60px;
            overflow: hidden;
        } */

        .job-salary div {
            margin: auto;
            background-color: #66a3c2;
            border-radius: .25em;
            color: #fff;
            font-size: 11px;
            font-weight: 400;
            padding: 4px 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: fit-content;
            margin: 20px auto;
            text-align: center;
            min-width: 150px;
        }

        .job-recruits {
            text-align: center;
            padding: 20px 10px;
        }

        .job-recruits div {
            font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;
            color: #333;
        }

        .job-recruits .count {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.2;
        }

        .divider {
            border-top: 1px solid #ccc;
            margin: 4px 0;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }

        .job-recruits .recruit {
            font-size: 12px;
            color: #666;
        }

        .job-deadline {
            height: 100px;
            border-left: 1px solid #e0e0e0;
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .job-deadline div {
            font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;
            color: #333;
        }

        .job-deadline .days {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .job-deadline .limit {
            font-size: 11px;
            color: #666;
        }

        .job-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            margin-top: 40px;
        }

        .publisher {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #666;
        }

        .apply-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .publish-date {
            color: #666;
        }

        .apply-btn {
            background-color: #35b2ea;
            width: 109px;
            height: 28px;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .mobile-job-item {
            background: white;
            /* border-radius: 8px; */
            overflow: hidden;
            margin-bottom: 15px;
            margin: 0 -10px 0 -10px;
            /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
        }
        
        .mobile-job-header {
            background-color: #F5F5F5;
            padding: 5px 15px;
            text-align: right;
            font-size: 12px;
            color: #085591;
        }
        
        .mobile-job-main {
            display: flex;
            padding: 15px 5px;
        }
        
        .mobile-job-image {
            width: 70px;
            height: 70px;
            background-color: #eee;
            border-radius: 6px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
        }
        
        .mobile-job-info {
            flex: 1;
        }
        
        .mobile-job-title {
            color: #085591;
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .mobile-job-subtitle {
  
         width: 85px;
         font-size: 13px;
         color: #666;
         margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        -webkit-line-clamp: 1; 
        -webkit-clamp: 1;
        -webkit-box-orient: vertical; 
        white-space: normal; 
}
        
        .mobile-job-date {
            font-size: 12px;
            /* color: #999; */
        }
        
        .mobile-job-tag {
            display: inline-block;
            background-color: #069;
            color: white;
            padding: 2px 20px;
            border-radius: 4px;
            font-size: 12px;
            margin-top: 5px;
        }

        .mobile-right-img-tc{
          display: flex;
          align-items: center;
        }
        .mobile-right-img{
          width: 20px;
        }
        
        .mobile-job-content {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .mobile-job-desc {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .mobile-job-stats {
            display: flex;
            padding: 15px;
        }
        
        .mobile-stat {
            flex: 1;
            text-align: center;
            padding: 0 10px;
        }
        
        .mobile-stat:first-child {
            border-right: 1px solid #e0e0e0;
        }
        
        .mobile-stat-title {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .mobile-stat-value {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .mobile-stat-unit {
            font-size: 12px;
            color: #666;
            margin-left: 2px;
        }
        
        .mobile-job-apply {
            padding: 15px;
            text-align: left;
        }
        
        .mobile-apply-btn {
            background-color: #35b2ea;
            color: white;
            border: none;
            border-radius: 3px;
            padding: 2px 25px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            border: 1px solid #4198c1;
            border-bottom-color: #26779f;
            box-shadow: inset 0 1px #ffffff59, 0 0 1px #00000026;
            background-image: linear-gradient(180deg, #35b2ea, #349cce);
        }
        @media (max-width: 768px) {
            .desktop-layout {
                display: none;
            }
            
            .mobile-layout {
                display: block;
            }
            .job-stats-txt{
              font-size: 14px;
              margin-left: 20px;
            }
            
        }

        /* 职业样式结束 */
        
/* 移除最后一个元素的下边距 */
.model-content > *:last-child {
  margin-bottom: 0;
}        

.numin {
  width: 178px;
  height: 32px;
  border: 1px solid #e7e9e9;
  border-radius: 5px;
  padding-left: 10px;
  transition: all 0.3s ease;
}
.numin::placeholder {
   font-size: 14px;
    color: #c4c3c3; 
    opacity: 1;
    font-weight: 100;
}
.numin:focus{
  outline: none;
  border-color: #3498db;
}

.regbtn {
  width: 178px;
  height: 32px;
  font-size: 14px;
  font-weight: 100;
  color: #FFFFFF;
  margin-top: -5px;
  margin-bottom: 15px;
  background-color: #f26731;
}

.regbtn:hover {
  background-color: #eb9b7b;
  color: #ddd;
}

.filter {
  /* position: absolute;
  top: 10rem;
  right: 15.5rem;
  flex-direction: column;
  gap: 35px; */
  width: 200px;
 
}

.job-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 80px;
}

.publish-new-job-btn {
  margin-right: 50px;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 4px;
     background-color: var(--el-button-hover-bg-color);
    border-color: var(--el-button-hover-border-color);
    color: var(--el-button-hover-text-color);
    outline: none;
}

.model-block {
  margin-top: 20px;
  padding: 15px 0;
  border-radius: 5px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  width: 200px;
  border: 1px solid #ccc;
}

.model-content {
  text-align: center;
}

.model-content h3 {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.model-content p {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .model-block {
    margin: 15px 10px;
  }
  .job-stats{
  padding-right: 0px;
  margin-left: 20px;
  color: #000 !important;
}
  .publish-new-job-btn{
    margin-right: 20px;
  }
}


.filter-category {
  position: relative;
}

.category-items {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 320px;
  min-width: 400px;
  margin-top: -10px;
  z-index: 10;
  border: none;
  color: #085591;
}
.title-occupation{
  color: #085591;
  font-weight: 600;
}
.split-line{
  border-bottom: #16161626 1px solid;
  flex: 1;
  color: #085591;
  margin-top: 5px;
  margin-bottom: 5px;
}

.filter-category:hover .category-items {
  display: block;
}

.filter-category:hover .toggle-icon {
  transform: rotate(90deg);
}

.toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
  color: #ddd !important; 
}
/* .icon-color{

} */

.filter-category {
  position: relative;
}

.search-btn:hover {
  background-color: #b9b9b9;
  color: #666;
  border: none;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-btn {
  width: 80px;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  background-image: linear-gradient(180deg, #fff, #eee);
  border: 1px solid #cfcfcf;
  border-bottom-color: #b9b9b9;
  border-radius: 0 3px 3px 0;
  box-shadow: inset 0 1px #ffffff59, 0 0 1px #00000026;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  height: 44px;
  line-height: 1.6667;
  margin: 0;
  overflow: visible;
  padding: 10.5px 18px 10px;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
  text-transform: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  background-repeat: repeat-x;
  color: #333;
  text-decoration: none;
  border-left: none;
  position: relative;
  top: 0.66rem;
  right: 0.8rem;
}

.searchbox {
  background-color: #fcfcfc;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  float: none;
  margin: 0;
  max-width: 780px;
  padding: 0 10px;
  position: relative;
  width: 780px;
  color: #333;
  font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;
  font-size: 12px;
  line-height: 1.6667;
  word-break: break-word;
  word-wrap: normal;
  line-break: strict;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .searchbox {
  width: 350px;
}
.search-input {
  margin-top: 20px !important;
}
.search-btn {
  margin-left: 15px !important;
}
}
.apply-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.publish-date {
  font-size: 12px;
  color: #666;
}

.deadline-info {

  display: flex;
  flex-direction: column;
}

.days-left,
.days-expired {
  margin-top: 5px;
}


.job-content {
  flex: 1 1 auto;
  min-width: 200px;
  line-height: 11px;
  height: 50px;
}

.job-salary {
  flex: 1 1 auto;
  min-width: 120px;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}


.find-work-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

/* 顶部广告区域 */
.top-banner {
  background-image: url('/img/banner_find_worker.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* border-radius: 8px; */
  margin-top: 40px !important;
  margin: auto;
  min-height: 90px;
  width: 700px;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
}

.banner-text {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.search-button {
  font-weight: bold;
}

/* 职位列表区域 */
.job-list-container {
  background-color: #fff;
  /* border-radius: 8px; */
  padding: 20px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  display: flex;
  gap: 20px;
}

/* 职位统计信息 */
.job-stats {
  margin-top: 60px;
  color: #666;
  font-size: 12px;
}

/* 职位类型筛选 */
.job-filter {
  width: 250px;
  flex-shrink: 0;
  /* border: 1px solid #e0e0e0; */
  /* border-radius: 4px; */
  align-self: flex-start;
  color: #4a90e2;
  font-family: Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif;
  position: relative;
  left: 60px;
}

.filter-title {
  /* background-color: #f5f5f5; */
  width: 200px;
  border-bottom: 1px solid #e0e0e0;
  /* padding: 10px 15px; */
  font-weight: bold;

}

.filter-title-text {
  font-size: 14px;
  color: #0060a9;
  border-bottom:3px solid #0068b7 ;
  width: 90px;
  padding: 5px;
}
.filter-content {
  border: 1px solid #e0e0e0;
  /* width: 15rem; */
  width: 200px;
  height: 131px;
  margin-top: 10px;
  padding: 15px 0px 15px 15px;
  background-color: #fcfcfc;
}

.filter-category {
  margin-bottom: 15px;
}

.category-name {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease; 
  color: #085591;
  position: relative; 
  border: 1px solid transparent; 
  margin-left: 0; 
}

.category-name:hover {
  background-color: #ffffff;
  border-color: #328acd; 
  margin-left: -15px;
  padding: 10px 5px !important;
}

/* 添加伪元素实现更平滑的效果 */
.category-name::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.category-name:hover::before {
  border-color: #328acd;
}


.toggle-icon {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.category-items {
  position: absolute;
  left: 100%;
  /* 从左侧展开 */
  top: 0;
  min-width: 200px;
  background: white;
  z-index: 10;
  border: 1px solid #328acd;
  padding: 15px;
  
}

.filter-category:hover .category-items {
  display: block;
}

.category-item {
  padding: 10px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 11px;
}

.category-item:hover {
  background-color: #f0f9ff;
  border-color: #4a90e2;
}

.category-item.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}
@media (max-width: 768px) {
  .category-items {
  width: 200px !important;
  margin-left: 140px;
}
.job-filter{
  left: 0px !important;
}
}


/* 搜索框 */
.search-box {
  display: flex;
  margin-bottom: 20px;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.search-input {
  width: 633px;
  height: 44px;
  flex: 1;
  top: 24%;
}

/* 筛选选项 */
.filter-options {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}

.filter-option .el-checkbox.is-checked + span {
  color: #409eff;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.filter-option:last-of-type {
  margin-right: 0;
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  /* border-radius: 4px; */
  background-color: #fff;
  color: #606266;
  font-size: 14px;
  margin-left: 0px;
}

.pagination-btn:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}

.pagination-btn:disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}

.pagination-controls {
  margin-right: 110px;
  display: flex;
  align-items: center;
}

.pagination-controls {
  display: flex;
  gap: 0px;
}

/* 右侧内容区域 */
.job-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
@media (max-width: 768px) {
  .job-content-area {
  margin-left: 5px;
}
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

/* 职位详情对话框样式 */
.full-content {
  padding: 10px;
}

.job-section,
.job-info-section,
.job-status-section,
.company-section {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.job-info-section .info-item,
.company-detail .info-item {
  display: flex;
  margin-bottom: 12px;
  margin-top: 20px;
}

.info-label {
  width: 140px;
  color: #666;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.status-item {
  /* background-color: #f5f7fa;
  padding: 15px; */
  /* border-radius: 4px; */
  text-align: center;
}

.status-label {
  display: block;
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.status-value {
  display: block;
  color: #4a90e2;
  font-size: 18px;
  font-weight: bold;
}

.company-header {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.company-basic-info {
  margin-left: 15px;
}

.company-basic-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
}

.company-basic-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.company-detail {
  margin-bottom: 20px;
}

.company-intro {
  margin-top: 20px;
}

.company-intro h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

@media (max-width: 768px) {
  .search-ctr {
    flex: 1;
  }

  .search-input {
    width: 100% !important;
  }

  .search-btn {
    min-width: 80px;
    border-radius: 0 4px 4px 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-input__prefix {
    display: none;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .filter-category:hover .category-items {
    left: 0;
    right: auto;
    top: 100%;
  }

  /* 将左右布局改为上下布局 */
  .job-list-container {
    flex-direction: column;
  }

  /* 顶部广告区域在手机端的样式 */
  .top-banner {
    min-height: 48px;
    position: relative;
    right: 155px;
  }

  /* 职位类型筛选区域在手机端的样式 */
  .job-filter {
    width: 100%;
    margin-bottom: 20px;
  }

  /* 类别项目在手机端的样式 */
  .category-items {
    gap: 5px;
  }

  .category-item {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* 搜索框在手机端的样式 */
  .search-box {
    flex-direction: column;
    gap: 10px;
  }

  .search-btn {
    width: 100%;
  }

  /* 其他响应式调整 */
  .banner-content {
    flex-direction: column;
    gap: 15px;
  }

  .job-details {
    flex-direction: column;
    gap: 10px;
  }

  .filter-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  /* 职位项目在手机端的样式 */
  /* .job-item {
    padding: 10px;
  } */

  /* 职位底部信息在手机端的样式 */
  .job-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .publisher {
    width: 100%;
    margin-bottom: 10px;
  }

  .apply-btn {
    width: 100%;
  }

  /* 对话框在手机端的样式 */
  .el-dialog {
    width: 95% !important;
    margin: 0 auto !important;
  }
}

/* 弹窗样式 */
.dialog-footer {
  display: flex;
  justify-content: center;
  width: 100%;
}

.editor-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 100;
  width: 100%;
}

/* 确保编辑器内容区域正确处理换行 */
.w-e-text-container {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.w-e-text p {
  margin: 10px 0;
  line-height: 1.5;
}

/* 增强编辑器换行支持 */
.w-e-text {
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

.w-e-text br {
  display: block !important;
  content: "" !important;
  margin-top: 0.5em !important;
}

/* 强制段落换行 */
.w-e-text p {
  display: block !important;
  margin: 1em 0 !important;
  white-space: pre-wrap !important;
}

/* 确保编辑器内容区域正确显示换行 */
.w-e-text-container p, .w-e-text-container div {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  margin-bottom: 1em !important;
}

/* 修复编辑器内容区域的换行问题 */
.w-e-text-container [contenteditable=true] {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}
.loading-container {
  text-align: center;
  padding: 20px;
}

.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(79, 172, 254, 0.2);
  border-radius: 50%;
  border-top-color: #4facfe;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  margin-top: 15px;
  color: #4facfe;
  font-weight: 500;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th {
  position: relative; /* 为伪元素定位做准备 */
  font-size: 0; /* 隐藏原有文本 */
  visibility: hidden; /* 隐藏原有文本，保留空间 */
}

.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th > div {
  visibility: visible; /* 确保单元格本身可见 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(1) > div::after { content: "1"; visibility: visible; } /* 周日 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(2) > div::after { content: "2"; visibility: visible; } /* 周一 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(3) > div::after { content: "3"; visibility: visible; } /* 周二 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(4) > div::after { content: "4"; visibility: visible; } /* 周三 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(5) > div::after { content: "5"; visibility: visible; } /* 周四 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(6) > div::after { content: "土"; visibility: visible; } /* 周五 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th:nth-child(7) > div::after { content: "周六"; visibility: visible; } /* 周六，你只要求改前五，周六周日可以保留或自定义 */

/* 如果默认样式影响了位置，你可能需要额外调整 */
.custom-week-label-picker ::v-deep .el-picker-panel__body .el-date-table th {
  padding: 5px 0;
  height: auto;
}
</style>